<template>
  <div class="msg-main">
    <p class="msg-title"
      style="text-align: center; font-size: 20px; color: #444444; font-weight: 600; height: 30px; width: 100%; border-bottom: 1px solid #ddd;">
      系统消息
    </p>
    <div class="msg-box">
      <template v-if="messages.length > 0">
        <div class="message-detail" v-for="(message, index) in messages" :key="index"
             @click="selectMessage(message)">
          <h1 class="detail-title">{{ message.title }}</h1>
          <p class="detail-time">{{ formatDate(message.createdAt) }}</p>
          <div class="detail-content">{{ message.content }}</div>
        </div>
      </template>
      <div v-else class="no-data">
        <p>暂无数据</p>
      </div>
    </div>
    <p class="lock-all" @click="this.$router.push('/info/settings')">查看全部</p>
  </div>

  <!-- 对话框：显示选中消息的详细信息 -->
  <el-dialog
    v-model="showMsgDet"
    title="消息详情"
    width="500"
    align-center
    draggable="true"
    :before-close="handleClose"
  >
    <div v-if="selectedMessage" class="selected-message">
      <p class="selected-time">{{ formatDate(selectedMessage.createdAt) }}</p>
      <h3 class="selected-title">{{ selectedMessage.title }}</h3>
      <div class="selected-content">{{ selectedMessage.content }}</div>
    </div>
    <template #footer>
      <el-button @click="closeDialog">关闭</el-button>
    </template>
  </el-dialog>
</template>

<script>
export default {
  props: {
    msgData: { type: Array, default: () => [] } // 确保 msgData 是一个数组
  },
  data()
  {
    return {
      messages: [], // 存储消息列表
      selectedMessage: null, // 存储当前选中的消息
      showMsgDet: false // 控制对话框显示
    }
  },
  created()
  {
    this.messages = this.msgData // 初始化消息列表
  },
  methods: {
    selectMessage(message)
    {
      this.selectedMessage = message // 更新选中的消息
      this.showMsgDet = true // 打开对话框
    },
    handleClose(done)
    {
      this.showMsgDet = false // 关闭对话框
      done()
    },
    closeDialog()
    {
      this.showMsgDet = false // 关闭对话框
    },
    formatDate(dateString)
    {
      const date = new Date(dateString)
      return date.toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit'
      }).replace(/\//g, '-')
    }
  }
}
</script>

<style scoped>
.msg-main {
  height: 340px;
  user-select: none;
  border-radius: 12px;
  margin: 0 auto;
  width: 260px;
  padding: 20px;
  background-color: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.msg-box {
  display: flex;
  flex-flow: column nowrap;
  overflow-y: auto;
  width: 100%;
  height: calc(100% - 60px);
  margin-top: 10px;
}

.message-detail {
  border-radius: 12px;
  width: 93%;
  padding: 10px;
  margin-top: 5px;
  cursor: pointer;
  background-color: #f9f9f9;
  transition: background-color 0.3s;
}

.message-detail:hover {
  background-color: rgba(128, 128, 128, 0.168);
}

.detail-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin: 0 0 5px;
}

.detail-time {
  font-size: 12px;
  color: #666;
  margin: 0 0 5px;
}

.detail-content {
  font-size: 14px;
  color: #444;
  line-height: 1.6;
  text-wrap: wrap;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lock-all {
  text-align: center;
  font-size: 14px;
  font-weight: 400;
  cursor: pointer;
  margin-top: 10px;
}

.lock-all:hover {
  color: #425aef;
}

.no-data {
  text-align: center;
  font-size: 14px;
  color: #999;
  margin-top: 50%;
  transform: translateY(-50%);
}

/* 对话框内的样式 */
.selected-message {
  padding: 10px;
  background-color: #f0f0f0;
  border-radius: 8px;
}

.selected-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin: 0 0 10px;
}

.selected-time {
  font-size: 12px;
  color: #666;
  margin: 0 0 10px;
}

.selected-content {
  font-size: 14px;
  color: #444;
  line-height: 1.6;
}
</style>
